/**
 * Action Buttons 组件颜色变量
 * 
 * 此文件定义了action-buttons组件在不同主题下的颜色配置
 * 包括: 背景色、文字颜色、图标颜色等
 */

/* 基础颜色常量 - 固定颜色（不随主题变化） */
$add-icon-color: #67c23a; // 新增按钮图标颜色
$delete-icon-color: #f56c6c; // 删除按钮图标颜色
$text-color: #333333; // 按钮文字颜色

/* 默认主题下的颜色变量（蓝色） */
:root {
  /* 背景色 - 正常状态 */
  --action-btn-bg-color: #F5F9FF;
  --action-btn-hover-bg-color: rgba(1, 101, 255, 0.25);
  
  /* 图标颜色（主题相关的按钮） */
  --action-btn-icon-color: var(--primary-color, #0165FF);
  
  /* 按钮文字颜色 */
  --action-btn-text-color: #{$text-color};
}

/* 红色主题 */
[data-theme="red"] {
  --action-btn-bg-color: rgba(232, 71, 73, 0.15);
  --action-btn-hover-bg-color: rgba(232, 71, 73, 0.25);
  --action-btn-icon-color: var(--primary-color, #e84749);
}

/* 深蓝色主题 */
[data-theme="navy"] {
  --action-btn-bg-color: rgba(12, 43, 84, 0.15);
  --action-btn-hover-bg-color: rgba(12, 43, 84, 0.25);
  --action-btn-icon-color: var(--primary-color, #0c2b54);
}

/* 浅蓝色主题 */
[data-theme="light-blue"] {
  --action-btn-bg-color: rgba(98, 167, 255, 0.15);
  --action-btn-hover-bg-color: rgba(98, 167, 255, 0.25);
  --action-btn-icon-color: var(--primary-color, #62a7ff);
}

/* 青色主题 */
[data-theme="cyan"] {
  --action-btn-bg-color: rgba(20, 192, 192, 0.15);
  --action-btn-hover-bg-color: rgba(20, 192, 192, 0.25);
  --action-btn-icon-color: var(--primary-color, #14c0c0);
}

/* 绿色主题 */
[data-theme="green"] {
  --action-btn-bg-color: rgba(103, 194, 58, 0.15);
  --action-btn-hover-bg-color: rgba(103, 194, 58, 0.25);
  --action-btn-icon-color: var(--primary-color, #67c23a);
}

/* Action Button 类样式 */
.custom-action-btn {
  /* 基础样式 */
  border-radius: 10px;
  width: 83px;
  height: 30px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  outline: none;
  
  /* 应用颜色变量 */
  background-color: var(--action-btn-bg-color);
  color: var(--action-btn-text-color);
  
  &:hover {
    background-color: var(--action-btn-hover-bg-color);
  }
  
  /* 图标基础样式 */
  .el-icon {
    font-size: 14px;
  }
  
  /* 不同按钮类型的图标颜色 */
  &.add-btn .icon-add {
    color: #{$add-icon-color};
  }
  
  &.delete-btn .icon-delete {
    color: #{$delete-icon-color};
  }
  
  /* 使用主题色的按钮图标 */
  &.enable-btn .icon-enable,
  &.disable-btn .icon-disable,
  &.import-btn .icon-import,
  &.export-btn .icon-export,
  &.viewLog-btn .icon-viewLog,
  &.edit-btn .icon-edit{
    color: var(--action-btn-icon-color);
  }
 
}

